import React, {Fragment, useEffect, useRef, useState} from "react";
import {Form, Input, message, Modal,} from "antd";
import './index.scss'


type Props = {
    visible: boolean
    data?: object
    onSuccess: (res?: any) => void
    onCancel: () => void
}
const initialState = {
    confirmLoading: false,
};


const ForgetPwdModal = ({
                            visible,
                            onSuccess,
                            onCancel,
                        }: Props) => {
    const [state, setState] = useState(initialState);
    const [form] = Form.useForm();




    useEffect(() => {
        // if (isRendered = false;)

    }, [])


    function handleSubmitForm() {
        const values = form.getFieldsValue();

        message.success(JSON.stringify(values));
        setState({confirmLoading: false});





    }


    return (
        <Fragment>
            <Modal
                title="忘记密码？"
                visible={visible}
                getContainer={false}
                onOk={handleSubmitForm}
                onCancel={onCancel}
                centered
                forceRender
                maskClosable={false}
                destroyOnClose
            >
                <div className="modal-content">
                    <Form
                        name="forgetPwd"
                        autoComplete="off"
                        form={form}
                    >
                        <Form.Item
                            label="用户名"
                            name="username1"
                            key="username1"
                            rules={[{required: true, message: 'Please input your username!'}]}
                        >
                            <Input/>
                        </Form.Item>

                        <Form.Item
                            label="号&#8195;码"
                            name="phoneNum"
                            key="phoneNum"
                            rules={[{required: true, message: 'Please input your username!'}]}
                        >
                            <Input/>
                        </Form.Item>

                        <Form.Item
                            label="验证码"
                            name="code1"
                            key="code1"
                            rules={[{required: true, message: 'Please input your username!'}]}
                        >
                            <Input/>
                        </Form.Item>

                        <Form.Item
                            label="密&emsp;码"
                            name="password1"
                            key="password1"
                            rules={[{required: true, message: 'Please input your password!'}]}
                        >
                            <Input.Password/>
                        </Form.Item>

                    </Form>

                </div>


            </Modal>
        </Fragment>
    );
};

export default ForgetPwdModal;
